import { UploadOutlined } from '@ant-design/icons';
import { Button, message, Modal, Upload } from 'antd';
import React, { useState } from 'react';
import { baseURL } from 'utils/request';
import { getToken } from 'utils/storage';

export default function Text() {
  // 声明按钮的显示于隐藏
  const [fileList, setFileList] = useState([]);
  // 声明存储图片
  const [imgSrc, setImgSrc] = useState('');
  const props = {
    name: 'image',
    // 文件上传框，默认支持的文件类型
    accept: '.png,.jpg',
    action: `${baseURL}/v1_0/upload`,
    headers: {
      authorization: `Bearer ${getToken()}`,
    },
    // 上传中、完成、失败都会调用这个函数。
    // file   fileList   event
    onChange(info) {
      // 在onChange中设置按钮的显示于隐藏
      setFileList(info.fileList);
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        message.success(`${info.file.name} 21`);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} 23`);
      }
    },
    // 预览图片
    onPreview(file) {
      setImgSrc(file.thumbUrl);
    },

    // 图片上传前的钩子函数
    beforeUpload(file) {
      // 这是声明类型的白名单
      const imgs = ['image/jpg', 'image/png'];
      // 阻止上传
      if (!imgs.includes(file.type)) {
        message.warning('不允许上传的文件类型', 1);
        // 阻止发请求，也不显示在页面上
        return Upload.LIST_IGNORE;
      }
    },
  };
  return (
    <>
      {/* // 声明按钮的显示于隐藏 ,将fileList放到Upload的props身上 */}
      <Upload {...props} listType="picture-card" fileList={fileList}>
        {/* 将按钮改为受控组件,控制显示于隐藏 */}
        {fileList.length === 3 ? null : <UploadOutlined />}
      </Upload>
      <Modal
        // 弹框顶部的文字
        title="预览图片"
        // 对话框的显示于隐藏
        visible={!!imgSrc}
        // 去除底部
        footer={null}
        // 点击X关闭弹框
        onCancel={() => setImgSrc('')}
      >
        <img width={480} style={{ objectFit: 'cover' }} src={imgSrc} alt="" />
      </Modal>
    </>
  );
}
